<script setup lang="ts">
import {ref, watch} from "vue";
import axios from "@/request/index"
import clipboard from "clipboard";
import {ElMessage} from 'element-plus'

const loading = ref(false)

const value = ref("")

const ipList = ref([] as any[])

function ipButtonNull() {
  loading.value = true;

  axios({
    method: "post",
    url: "/IPV4/getIPV4Info",
    data: {
      ipContent: null
    }
  }).then((res) => {
    loading.value = false
    ipList.value = res.data.data
  }).catch(function () {
    ElMessage.error('接口连接超时')
    loading.value = false
  })
}

function ipButton() {
  if (value.value.length <= 0) {
    ElMessage({
      message: '请先输入亚马逊Ip段，在点击此按钮',
      type: 'warning',
    })
  } else {
    loading.value = true;
    // 发起一个post请求
    axios({
      method: "post",
      url: "/IPV4/getIPV4Info",
      data:
          JSON.stringify({
            ipContent: value.value
          })
    }).then((res) => {
      loading.value = false
      ipList.value = res.data.data
    })
  }
}

// 需要转换的url
const ipUrl = ref('')
// 转换后的url
const ipConversionUrl = ref('')

function ipConversion() {
  axios({
    method: "post",
    url: "/conversion/getLink",
    data: JSON.stringify({
      target: "clash",
      url: ipUrl.value
    })
  }).then((res) => {
    ipConversionUrl.value = res.data.data.url
  }).catch(function () {
    ElMessage.error('接口连接超时')
  })
}

function windowsIps() {
  window.open("https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/LocationsOfEdgeServers.html");
}
// 打开subconverter
function windowsSubconverter() {
  window.open("https://github.com/tindy2013/subconverter/releases");
}

// 拷贝所有国外的ip
function copyIpDescription() {
  const element = document.getElementsByClassName("ip_description");

  let ipContentArr = "";
  for (let i = 0; i < element.length; i++) {
    const elementElement = element[i];
    ipContentArr += elementElement.textContent + "\n"
  }

  // 拷贝
  try {
    clipboard.copy(ipContentArr.toString())
    ElMessage({
      message: '复制成功',
      type: 'success',
    })
  } catch (e) {
    ElMessage.error('复制失败，该浏览器不支持复制')
  }
}

// 显示加载图
let empty = ref(true)
// 可以直接侦听一个 ref
watch(ipList, async (newQuestion) => {
  empty.value = newQuestion.length <= 0;
})

// 选择框内的参数  例如clash
const targetValue = ref('clash')
const options = [
  {
    value: 'clash',
    label: 'clash',
  },
  {
    value: 'clashr',
    label: 'clashr',
  },
  {
    value: 'quan',
    label: 'quan',
  },
  {
    value: 'quanx',
    label: 'quanx',
  },
  {
    value: 'loon',
    label: 'loon',
  },
  {
    value: 'mellow',
    label: 'mellow',
  },
  {
    value: 'ss',
    label: 'ss',
  },
  {
    value: 'sssub',
    label: 'sssub',
  },
  {
    value: 'ssd',
    label: 'ssd',
  },
  {
    value: 'ssr',
    label: 'ssr',
  },
  {
    value: 'surfboard',
    label: 'surfboard',
  },
  {
    value: 'surge&ver=2',
    label: 'surge&ver=2',
  },
  {
    value: 'surge&ver=3',
    label: 'surge&ver=3',
  },
  {
    value: 'surge&ver=4',
    label: 'surge&ver=4',
  },
  {
    value: 'trojan',
    label: 'trojan',
  },
  {
    value: 'v2ray',
    label: 'v2ray',
  },
  {
    value: 'mixed',
    label: 'mixed',
  },
  {
    value: 'auto',
    label: 'auto',
  },
]

</script>

<template>
  <el-button type="primary" @click="ipButtonNull">自动获取国外IP段，如失败请手动输入IP段</el-button>
  <el-button type="primary" @click="windowsIps">打开亚马逊IP网址</el-button>
  <el-input v-model="value" id="button_size" placeholder="请输入亚马逊IP段" clearable/>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-button type="primary" @click="ipButton">根据输入框获取国外IP段</el-button>
    </el-col>
    <el-col :span="7">
      请选择你需要的节点类型：<el-button type="primary" @click="windowsSubconverter">打开subconverter的github</el-button>
      <el-select v-model="targetValue" class="m-2" placeholder="Select" >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="ipConversion">点击生成订阅链接</el-button>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-scrollbar height="400px" v-loading=loading>
        <el-empty description="请先查询IP数据" v-if="empty"/>
        <p v-for="item in ipList" :key="item.name" class="ip_description">
          {{ item.ip }}
        </p>
      </el-scrollbar>
    </el-col>
    <el-col :span="6">
      <el-input
          v-model="ipUrl"
          :rows="18"
          type="textarea"
          placeholder="需要转化的链接丢这"
      />
    </el-col>
    <el-col :span="6">
      <el-empty description="请先点击生成订阅链接按钮" v-if="this.ipConversionUrl.length <=  0 "/>
      <el-link target="_blank" type="primary" :href="ipConversionUrl" v-if="this.ipConversionUrl.length >  0">
        点击我跳转到转换链接，请自己右键存储转换后的文件
      </el-link>
    </el-col>
  </el-row>

  <el-button type="primary" @click="copyIpDescription">复制结果</el-button>

</template>

<style scoped>
#button_size {
  width: 300px;
  height: 90px;
}

</style>
